'use strict';

var NavbarCom = React.createClass({
	render : function(){
		var licontents = [{"id":"0","text":"首页"}, {"id":"1","text":"项目管理"}, {"id":"2","text":"任务管理"}, {"id":"3","text":"统计查询"}];
		//var licontents = ["首页", "项目管理", "任务管理", "统计查询"];
		return (<div>
			<NavbtnCom className="navbar-brand" >项目管理系统</NavbtnCom>
			<div>
				<NavULCom licontents={licontents}/>
			</div>
			<div className="pull-right">
				<ul className="nav navbar-nav">
					<li><NavbtnCom onClick={this.handleClick}>退出</NavbtnCom></li>
					<li><NavbtnCom onClick={this.handleClick}>登陆</NavbtnCom></li>
				</ul>
			</div>
		</div>);
	}
});
var NavULCom = React.createClass({
	getInitialState: function() {
	    return {curindex: 0};
  	},
	handleItemClick:function(item,index,childState){
   	 	this.setState({curindex: index});
  	},
	render : function(){
		var _this = this;
		return (
			<ul className="nav navbar-nav">
					{this.props.licontents.map(function(licontent){
						var isActive = licontent.id == _this.state.curindex? "active":"";
						return <LiCom onClick={_this.handleItemClick.bind(_this,licontent,licontent.id)}
						key={licontent.id} isActive={isActive} btnName={licontent.text}/>
					})}
			</ul>
		);
	}
});
var LiCom = React.createClass({
	handleClick : function(){
		this.props.onClick(this.state)
	},
	render : function(){
		return(
			<li className={this.props.isActive}>
				<NavbtnCom  onClick={this.handleClick} >{this.props.btnName}</NavbtnCom>
			</li>
		);
	}
});
var NavbtnCom = React.createClass({
	render : function(){
		return(
			<a {...this.props} href="javascript:;"></a>
		);
	}
});
ReactDOM.render(<NavbarCom />, document.getElementById("navbar"));
